@import "../common/const.scss";
@import "../common/mixin.scss";

.sp-chat {
	@include flex(center, null, column);

	&__ {
		&header,
		&content {
			width: 100%;
		}

		&header {
			@include flex();
			height: 56px;
			box-shadow: 0 1px 2px rgba(0, 21, 41, 0.08);

			& > div {
				flex: 1;
			}
		}

		&content {
			flex: 1;
			@include flex();
		}

		&aside {
			position: relative;
			@include size(375px, 100%);
			@include flex(center, null, column);
			padding: 30px 45px;
			box-sizing: border-box;
			border-right: 1px solid #ccc;

			&:after {
				content: "";
				@include absolute(0, 0, 0, 0, 10);
				@include background($chatAsideBack);
				opacity: 0.1;
			}

			& > div {
				position: relative;
				width: 100%;
				z-index: 11;
			}

			&- {
				&scroll {
					flex: 1;
					height: 100%;
					overflow-x: hidden;
					overflow-y: scroll;
					padding: 30px 0;
					box-sizing: border-box;

					&::-webkit-scrollbar {
						display: none;
					}
				}

				&item {
					border: 1px solid #ccc;
					@include size(100%, 38px, 34px);
					@include font(12px, 38px, #333, left);
					padding: 0 20px;
					cursor: pointer;
				}
			}
		}

		&main {
			position: relative;
			flex: 1;
			@include size(auto, 100%);
			padding: 20px;
			box-sizing: border-box;
		}

		&send {
			@include absolute(null, null, 0, 0, 15);
			@include size(100%, 60px);
			border-top: 1px solid #ccc;

			input {
				display: block;
				@include size(100%, 60px);
				border: 0;
				outline: none;
				padding: 0 20px;
				font-size: 14px;
				box-sizing: border-box;
			}

			span {
				@include size(24px, 24px);
				@include absolute(18px, 18px, null, null, 16);
				@include background($chatAsideSend);
				cursor: pointer;
			}
		}

		// 聊天列表
		&message {
			&- {
				&item {
					max-width: 60%;
					// @include flex();
				}

				&content {
					width: auto;
					min-width: 200px;
					max-width: 100%;
					padding: 15px;
					box-sizing: border-box;
					@include font(14px, 24px, null, null);
				}

				&avatar {
					img {
						display: inline-block;
						@include size(60px, 60px, 30px);
					}
				}

				&to {
					.sp-chat__message-content {
						color: #333;
						background: rgba(240, 240, 240, 1);
					}
				}

				&from {
					float: right;
					text-align: right;

					.sp-chat__message-content {
						color: #fff;
						background: rgba(255, 141, 26, 1);
					}
				}
			}
		}
	}
}

// 暗夜模式
.dark {
	.sp-chat {
		&__ {
			&aside {
				&- {
					&item {
						color: #fff;
					}
				}
			}

			&send {
				span {
					@include background($chatAsideSendWhite);
				}
			}
		}
	}
}

// 移动端样式
@media screen and (max-width: 750px) {
	.sp-chat {
		&__ {
			&aside {
				display: none;
			}
		}
	}
}
